<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Flickr Photo Wall - Tutorial by Kyle Rush - kylerush.net</title>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
		var apiKey = '6c07b529bab8fe1873803ee360098501';
			$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=6760a9ec99da9d319ac05e4546f6b2f8&tags=bridge&lat=51.5001524&lon=-0.1262362&format=json&nojsoncallback=1&api_sig=439d8bc31bdbabd224f01aacae31a775", function(data) {
				$.each(data.photos.photo, function(i,item) {
					var photoID = item.id;
					$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data) {
						
							$.each(data.photo.urls.url, function(j, item) {	
								$("img").attr({ 
								  src: item._content								  
								});
								$("#image-container").append("<img />");
							});
											
					});
				});
			});
		</script>
		<style type="text/css">		
		
		</style>
	</head>
	<body>
		<div id="image-container" >
		</div><!--#image-container-->
	</body>
</html>

